<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>610书窝 - 成员风采</title>

  <!-- Favicon -->
  <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">

  <!-- Custom CSS -->
  <link rel="stylesheet" href="./assets/css/style.css">

  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
    integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&family=Work+Sans:wght@400;500;700&display=swap"
    rel="stylesheet">

  <!-- Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

  <!-- Basic Internal Styles for Aesthetic Layout -->
  <style>
    body {
      background-color: var(--soft-pink-bg);
      /* 使用柔软的粉色背景 */
      color: var(--dark-pink-text);
      display: flex;
      /* 使body成为flex容器 */
      flex-direction: column;
      /* 垂直堆叠子元素 */
      min-height: 100vh;
      /* 确保body至少占满整个视口高度 */
    }

    main {
      flex-grow: 1;
      /* 允许主内容区域增长并将页脚推到底部 */
    }

    .member-header {
      background-color: var(--white-1);
      padding: 15px 0;
      box-shadow: 0 2px 5px hsla(330, 40%, 45%, 0.05);
      text-align: center;
      position: sticky;
      /* 使标题栏固定 */
      top: 0;
      /* 固定在顶部 */
      z-index: 10;
      /* 确保标题栏保持在内容上方 */
      width: 100%;
      /* 确保标题栏占满整个宽度 */
    }

    .member-header .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: 1200px;
      /* 与主页一致 */
      margin-inline: auto;
      padding-inline: 15px;
    }

    .member-header .logo img {
      /* 可以根据需要设置logo样式 */
    }

    .back-link {
      color: var(--secondary-pink);
      font-weight: var(--fw-500);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: var(--transition-1);
    }

    .back-link:hover {
      color: var(--primary-pink);
    }

    .members-section {
      padding-block: var(--section-padding);
    }

    .members-section .container {
      max-width: 1000px;
      /* 稍窄一些以便聚焦 */
      margin-inline: auto;
      padding-inline: 15px;
    }

    .section-title {
      text-align: center;
      margin-bottom: 50px;
      font-size: var(--fs-2);
      color: var(--dark-pink-text);
    }

    .section-title::after {
      content: '';
      display: block;
      width: 60px;
      height: 4px;
      background-color: var(--secondary-pink);
      margin: 10px auto 0;
    }

    /* 雷达图相关样式 */
    .analysis-container {
      width: 100%;
      max-width: 800px;
      margin: 20px auto;
      background: var(--white-1);
      border-radius: var(--radius-card);
      box-shadow: 0 5px 15px hsla(330, 40%, 75%, 0.15);
      padding: 15px;
      border: 1px solid var(--primary-pink);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .analysis-container:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px hsla(330, 40%, 70%, 0.2);
    }

    /* 雷达图容器 */
    .radar-box {
      position: relative;
      width: 100%;
      height: 260px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* 全屏分析弹窗 */
    .full-analysis {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(255, 255, 255, 0.96);
      padding: 20px;
      z-index: 1000;
      color: var(--dark-pink-text);
      text-align: center;
    }

    .full-analysis h2 {
      color: var(--secondary-pink);
      margin-bottom: 20px;
      font-size: var(--fs-2);
    }

    .full-analysis p {
      font-size: var(--fs-5);
      line-height: 1.6;
      margin-bottom: 10px;
    }

    .full-analysis button {
      background-color: var(--secondary-pink);
      color: var(--white-1);
      border: none;
      padding: 10px 20px;
      border-radius: var(--radius-pill);
      font-weight: var(--fw-500);
      margin-top: 20px;
      transition: var(--transition-1);
    }

    .full-analysis button:hover {
      background-color: var(--dark-pink-text);
    }

    /* 按钮样式 */
    .analysis-btn {
      background: var(--secondary-pink);
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: var(--radius-pill);
      font-weight: var(--fw-500);
      transition: var(--transition-1);
      margin-top: 10px;
    }

    .analysis-btn:hover {
      background: var(--dark-pink-text);
      transform: translateY(-2px);
    }

    /* 成员标题和描述 */
    .member-title {
      color: var(--dark-pink-text);
      margin: 10px 0;
      font-size: var(--fs-4);
      font-weight: var(--fw-600);
      font-family: var(--ff-jost);
    }

    .member-role {
      color: var(--medium-gray);
      font-size: var(--fs-6);
      margin-bottom: 10px;
    }

    .member-footer {
      background-color: var(--soft-pink-bg);
      padding-block: 20px;
      text-align: center;
      margin-top: auto;
      /* 将页脚推到底部 */
      width: 100%;
      /* 确保页脚占满整个宽度 */
    }

    .member-footer .copyright {
      color: var(--medium-gray);
      font-size: var(--fs-6);
    }
  </style>
</head>

<body>

  <!-- 简单的页眉 -->
  <header class="member-header">
    <div class="container">
      <a href="./index.html" class="logo">
        <!-- 使用网站原有的logo路径 -->
        <img src="./assets/images/logo.svg" width="138" height="28" alt="610书窝 Logo">
      </a>
      <a href="./index.html" class="back-link">
        <i class="fas fa-arrow-left"></i>
        <span>返回首页</span>
      </a>
    </div>
  </header>

  <main>
    <article>
      <section class="members-section">
        <div class="container">

          <h2 class="section-title">成员风采</h2>

          <!-- 杨佳宇 -->
          <div class="analysis-container">
            <div class="radar-box">
              <canvas id="yangRadar"></canvas>
            </div>
            <h3 class="member-title">杨佳宇</h3>
            <p class="member-role">智慧担当 | 深度思考者</p>
            <button onclick="showAnalysis('yang')" class="analysis-btn">
              查看详情
            </button>
          </div>

          <!-- 温尊皓 -->
          <div class="analysis-container">
            <div class="radar-box">
              <canvas id="wenRadar"></canvas>
            </div>
            <h3 class="member-title">温尊皓</h3>
            <p class="member-role">技术担当 | 意见提出者</p>
            <button onclick="showAnalysis('wen')" class="analysis-btn">
              查看详情
            </button>
          </div>

          <!-- 刘皓 -->
          <div class="analysis-container">
            <div class="radar-box">
              <canvas id="liuRadar"></canvas>
            </div>
            <h3 class="member-title">刘皓</h3>
            <p class="member-role">攻坚担当 | 问题解决者</p>
            <button onclick="showAnalysis('liu')" class="analysis-btn">
              查看详情
            </button>
          </div>

          <!-- 莫文劲 -->
          <div class="analysis-container">
            <div class="radar-box">
              <canvas id="moRadar"></canvas>
            </div>
            <h3 class="member-title">莫文劲</h3>
            <p class="member-role">气氛担当 | 拓宽思路者</p>
            <button onclick="showAnalysis('mo')" class="analysis-btn">
              查看详情
            </button>
          </div>

          <!-- 全屏分析内容 -->
          <div id="yangAnalysis" class="full-analysis">
            <h2>深度能力解析 - 杨佳宇</h2>
            <p>▶ 610的效率王者，逻辑思维、问题解决能力拉满</p>
            <p>▶ 能高效完成团队任务，是不可或缺的灵魂人物</p>
            <p>▶ 联系方式：1111111111111</p>
            <button onclick="closeAnalysis()">关闭</button>
          </div>

          <div id="wenAnalysis" class="full-analysis">
            <h2>技术能力解析 - 温尊皓</h2>
            <p>▶ 610的idea王者，知识储备、团队协作能力拉满</p>
            <p>▶ 是团队中的核心人物</p>
            <p>▶ 联系方式：1111111111111</p>
            <button onclick="closeAnalysis()">关闭</button>
          </div>

          <!-- 刘皓分析内容 -->
          <div id="liuAnalysis" class="full-analysis">
            <h2>攻坚力解析 - 刘皓</h2>
            <p>▶ 610的实干专家，实干精神、问题解决能力顶级</p>
            <p>▶ 是团队中的利刃</p>
            <p>▶ 联系方式：1111111111111</p>
            <button onclick="closeAnalysis()">关闭</button>
          </div>

          <!-- 莫文劲分析内容 -->
          <div id="moAnalysis" class="full-analysis">
            <h2>创新力解析 - 莫文劲</h2>
            <p>▶ 610的创新大神，组织能力、创新能力拉满</p>
            <p>▶ 是团队中的兴奋剂</p>
            <p>▶ 联系方式：1111111111111</p>
            <button onclick="closeAnalysis()">关闭</button>
          </div>

        </div>
      </section>
    </article>
  </main>

  <!-- 简单的页脚 -->
  <footer class="member-footer">
    <p class="copyright">
      © 2025 610书窝 | 由舍友们用心维护~ ❤️
    </p>
  </footer>

  <!-- 雷达图和交互脚本 -->
  <script>
    // 杨佳宇雷达图
    new Chart(document.getElementById('yangRadar').getContext('2d'), {
      type: 'radar',
      data: {
        labels: ['逻辑思维', '知识储备', '创新力', '协作能力', '学习速度', '问题解决'],
        datasets: [{
          data: [96, 95, 93, 94, 97, 95],
          backgroundColor: 'rgba(255,153,204,0.2)', // 粉色主题
          borderColor: 'rgba(255,102,178,1)',
          pointBackgroundColor: 'rgba(255,102,178,1)',
          pointHoverBackgroundColor: 'rgba(255,0,128,1)',
          pointRadius: 4,
          pointHoverRadius: 6
        }]
      },
      options: {
        scales: {
          r: {
            beginAtZero: true,
            max: 100,
            ticks: { display: false },
            grid: { color: 'rgba(255,204,229,0.3)' },
            pointLabels: { font: { size: 14 } }
          }
        },
        plugins: {
          legend: { display: false },
          tooltip: {
            backgroundColor: 'rgba(255,102,178,0.8)',
            titleFont: { size: 14 },
            bodyFont: { size: 14 },
            padding: 10,
            displayColors: false,
            callbacks: {
              title: function (context) {
                return context[0].label;
              },
              label: function (context) {
                return '能力值: ' + context.raw;
              }
            }
          }
        }
      }
    });

    // 温尊皓雷达图
    new Chart(document.getElementById('wenRadar').getContext('2d'), {
      type: 'radar',
      data: {
        labels: ['系统架构', '代码质量', '技术预研', '团队协作', '学习能力', '文档规范'],
        datasets: [{
          data: [95, 90, 85, 88, 92, 80],
          backgroundColor: 'rgba(255,153,204,0.2)', // 粉色主题
          borderColor: 'rgba(255,102,178,1)',
          pointBackgroundColor: 'rgba(255,102,178,1)',
          pointHoverBackgroundColor: 'rgba(255,0,128,1)',
          pointRadius: 4,
          pointHoverRadius: 6
        }]
      },
      options: {
        scales: {
          r: {
            beginAtZero: true,
            max: 100,
            ticks: { display: false },
            grid: { color: 'rgba(255,204,229,0.3)' },
            pointLabels: { font: { size: 14 } }
          }
        },
        plugins: {
          legend: { display: false },
          tooltip: {
            backgroundColor: 'rgba(255,102,178,0.8)',
            titleFont: { size: 14 },
            bodyFont: { size: 14 },
            padding: 10,
            displayColors: false,
            callbacks: {
              title: function (context) {
                return context[0].label;
              },
              label: function (context) {
                return '能力值: ' + context.raw;
              }
            }
          }
        }
      }
    });

    // 刘皓雷达图
    new Chart(document.getElementById('liuRadar').getContext('2d'), {
      type: 'radar',
      data: {
        labels: ['攻坚能力', '代码质量', '技术预研', '团队协作', '学习能力', '文档规范'],
        datasets: [{
          data: [95, 90, 85, 88, 92, 80],
          backgroundColor: 'rgba(255,153,204,0.2)', // 粉色主题
          borderColor: 'rgba(255,102,178,1)',
          pointBackgroundColor: 'rgba(255,102,178,1)',
          pointHoverBackgroundColor: 'rgba(255,0,128,1)',
          pointRadius: 4,
          pointHoverRadius: 6
        }]
      },
      options: {
        scales: {
          r: {
            beginAtZero: true,
            max: 100,
            ticks: { display: false },
            grid: { color: 'rgba(255,204,229,0.3)' },
            pointLabels: { font: { size: 14 } }
          }
        },
        plugins: {
          legend: { display: false },
          tooltip: {
            backgroundColor: 'rgba(255,102,178,0.8)',
            titleFont: { size: 14 },
            bodyFont: { size: 14 },
            padding: 10,
            displayColors: false,
            callbacks: {
              title: function (context) {
                return context[0].label;
              },
              label: function (context) {
                return '能力值: ' + context.raw;
              }
            }
          }
        }
      }
    });

    // 莫文劲雷达图
    new Chart(document.getElementById('moRadar').getContext('2d'), {
      type: 'radar',
      data: {
        labels: ['创新思路', '积极心态', '技术预研', '团队协作', '极限操作', '文档规范'],
        datasets: [{
          data: [95, 90, 85, 69, 92, 80],
          backgroundColor: 'rgba(255,153,204,0.2)', // 粉色主题
          borderColor: 'rgba(255,102,178,1)',
          pointBackgroundColor: 'rgba(255,102,178,1)',
          pointHoverBackgroundColor: 'rgba(255,0,128,1)',
          pointRadius: 4,
          pointHoverRadius: 6
        }]
      },
      options: {
        scales: {
          r: {
            beginAtZero: true,
            max: 100,
            ticks: { display: false },
            grid: { color: 'rgba(255,204,229,0.3)' },
            pointLabels: { font: { size: 14 } }
          }
        },
        plugins: {
          legend: { display: false },
          tooltip: {
            backgroundColor: 'rgba(255,102,178,0.8)',
            titleFont: { size: 14 },
            bodyFont: { size: 14 },
            padding: 10,
            displayColors: false,
            callbacks: {
              title: function (context) {
                return context[0].label;
              },
              label: function (context) {
                return '能力值: ' + context.raw;
              }
            }
          }
        }
      }
    });

    // 交互控制
    function showAnalysis(member) {
      document.querySelectorAll('.full-analysis').forEach(el => el.style.display = 'none');
      document.getElementById(member + 'Analysis').style.display = 'block';
    }

    function closeAnalysis() {
      document.querySelectorAll('.full-analysis').forEach(el => el.style.display = 'none');
    }
  </script>

</body>

</html>